<template>
  <a-form layout="vertical" >
    <a-row :gutter="[16,0]">
      <!-- 表单编号 -->
      <a-col :span="5">
        <a-form-model-item :label="$t('formsId')">
          <a-input
            v-model.trim="queryParams.applyNumber"
            :placeholder="$t('pleaseInput')+$t('formsId')"
            :maxLength="50"
            @keyup.enter="handleSearch"
          />
        </a-form-model-item>
      </a-col>
      <!-- 车型 -->
      <a-col :span="5">
        <a-form-model-item :label="$t('vehicleModel')">
          <car-model-code-select
            :default-value="queryParams.modelCode"
            mode="default"
            :has-all="false"
            style="width:100%"
            :clear="true"
            :query="{selectAll:true}"
            @changeoption="val => {changeModelBefore(val);handleSearch()}"
            :placeholder="$t('pleaseSelect')+$t('vehicleModel')"
          ></car-model-code-select>
        </a-form-model-item>
      </a-col>
      <!-- ECU名称 -->
      <a-col :span="5">
        <a-form-model-item :label="$t('ecuName')">
          <a-select
            v-model="queryParams.ecuName"
            showSearch
            allow-clear
            :placeholder="$t('pleaseSelect')+$t('ECU')"
            style="width:100%"
            mode="default"
            @search="getEcuList"
            @focus="clearEcuList"
            @change="handleSearch"
            :notFoundContent="isSearch?$t('noData'):$t('ecuNameSearch')"
          >
            <a-select-option
              v-for="(item,index) in ecuOptionArr"
              :key="index"
              :value="item"
              :title="item"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <!-- 版本号 -->
      <a-col :span="5">
        <a-form-model-item :label="$t('versionName')">
          <a-select
            v-model="queryParams.versionNumber"
            showSearch
            allow-clear
            :placeholder="$t('pleaseSelect')+$t('versionName')"
            style="width:100%"
            mode="default"
            optionFilterProp="children"
            :filterOption="$commonFun.filterOption"
            @change="handleSearch"
            :loading="versionNameLoading"
          >
            <a-select-option
              v-for="(item,index) in versionOptionArr"
              :key="index"
              :value="item"
              :title="item"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <!-- 表单状态 -->
      <a-col :span="4">
        <a-form-model-item :label="$t('forms')+$t('status')">
          <a-select
            v-model="queryParams.applyStatus"
            @change="handleSearch"
            :placeholder="$t('pleaseSelect')+$t('forms')+$t('status')"
            allow-clear>
            <a-select-option v-for="item in formsStatusArr" :key="item.value" :value="item.value">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <!-- 上架状态 -->
      <!-- <a-col :span="4">
        <a-form-model-item :label="$t('sjzt')">
          <a-select
            v-model="queryParams.shelveStatus"
            @change="handleSearch"
            :placeholder="$t('pleaseSelect')+$t('sjzt')"
            allow-clear>
            <a-select-option value="10">{{ $t('onshelfed') }}</a-select-option>
            <a-select-option value="20">{{ $t('offshelfed') }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col> -->
    </a-row>
  </a-form>
</template>
<script>
import { mapState } from 'vuex'
import AuthButton from '@/components/AuthButton'
import CarModelCodeSelect from '@/views/components/CarModelCodeSelect'
import EditItem from '@/components/EditItem'
import { formsStatusArr } from '../config/list'
export default {
  components: {
    AuthButton,
    CarModelCodeSelect,
    EditItem
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.softwareManageAndControl.queryParams
    })
  },
  data () {
    return {
      formsStatusArr,
      ecuOptionArr: [],
      isSearch: false,
      versionOptionArr: [],
      versionNameLoading: false
    }
  },
  created () {
    this.getVersionList()
  },
  watch: {
  },
  methods: {
    // 获取零件选项-远程搜索
    getEcuList (value = '') {
      const vm = this
      vm.ecuOptionArr = []
      vm.isSearch = false
      if (!value) return
      vm.isSearch = true
      vm.$api.getAllEcuName({ name: value.trim() }).then(response => {
        vm.ecuOptionArr = response.data || []
      })
    },
    // 获取版本号选项
    getVersionList () {
      const vm = this
      vm.versionNameLoading = true
      vm.$api.getVersionNum().then(res => {
        vm.versionOptionArr = res.data
        vm.versionNameLoading = false
      })
    },
    // 点击搜索按钮
    handleSearch () {
      this.$emit('clickbtn')
    },
    // 清空之前的搜索结果
    clearEcuList () {
      this.ecuOptionArr = []
      this.isSearch = false
    },
    // 选择车型
    changeModelBefore (val) {
      this.queryParams.modelCode = val
    },
    // 车型选项改变
    changeOption (key, val) {
      this.queryParams[key] = val
    }
  }
}
</script>
<style lang="less" scoped>
 ::v-deep .ant-form-item-label {
  padding-bottom: 2px;
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
</style>
